<!--
* @description 配方
* @fileName peifang.vue
* @author huangyu
* @date 2022/07/01 14:34:35
!-->
<template>
    <div class="otor_content">
        <div class="otor_wrap border">
            <el-form :inline="true" class="otor_form otor_form_search">
                <el-form-item label="物品名称">
                    <el-input placeholder="物品名称" v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="配方类型">
                    <el-select v-model="type" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="武器制作" label="武器制作"></el-option>
                        <el-option value="金属盔甲" label="金属盔甲"></el-option>
                        <el-option value="裁缝" label="裁缝"></el-option>
                        <el-option value="手工" label="手工"></el-option>
                        <el-option value="炼金" label="炼金"></el-option>
                        <el-option value="料理" label="料理"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="物品品质">
                    <el-select v-model="pinzhi" style="width:100px;">
                        <el-option value="" label="全部"></el-option>
                        <el-option value="英雄" label="英雄"></el-option>
                        <el-option value="唯一" label="唯一"></el-option>
                        <el-option value="传说" label="传说"></el-option>
                        <el-option value="稀有" label="稀有"></el-option>
                        <el-option value="普通" label="普通"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="熟练度">
                    <el-input placeholder="最小" v-model="min" style="width:80px"></el-input>
                    <el-input placeholder="最大" v-model="max" style="width:80px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="otor_wrap border">
            <el-table :data="list" highlight-current-row width="100%" border>
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column label="物品图标" prop="icon" width="100">
                    <template slot-scope="scope">
                        <div class="icon" :style="{background:'url(/aion/images/game/icon/items/'+scope.row.icon+')',width:'40px',height:'40px',cursor:'pointer'}" v-if="scope.row.icon"  @click="clickDetail(scope.row)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="配方名称" prop="name" width="320">
                    <template slot-scope="scope">
                        <div v-if="scope.row.pinzhi=='英雄'" class="item_grade_5"><strong>{{scope.row.name}}</strong></div>
                        <div v-if="scope.row.pinzhi=='唯一'" class="item_grade_4"><strong>{{scope.row.name}}</strong></div>
                        <div v-if="scope.row.pinzhi=='传说'" class="item_grade_3"><strong>{{scope.row.name}}</strong></div>
                        <div v-if="scope.row.pinzhi=='稀有'" class="item_grade_2"><strong>{{scope.row.name}}</strong></div>
                        <div v-if="scope.row.pinzhi=='普通'" class="item_grade_1"><strong>{{scope.row.name}}</strong></div>
                    </template>
                </el-table-column>
                <el-table-column label="配方类型" prop="type"></el-table-column>
                <el-table-column label="配方品质" prop="pinzhi"></el-table-column>
                <el-table-column label="熟练度" prop="pNum"></el-table-column>
           </el-table>
        </div>

        <pagination
        :total="total"
        :current-page="pageindex"
        :display="pagesize"
        @pagechange="pagechange"
        ></pagination>

    </div>
</template>

<script>
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
export default {
    props:{
        isComponents: Boolean,
    },
    components: {pagination},
    data() {
        return {
            list: [],
            name: '',
            pinzhi: '',
            type: '',
            min: '',
            max: '',

            model: {},
            dialogDetail: false,

            pageindex: 1,
            pagesize: 20,
            total: 0,
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        clickDetail(row){
            window.open('https://aioncodex.com/cn/recipe/'+row.number, '_blank');
        },
        search(){
            this.pageindex = 1
            this.getData()
        },
        getData(){
            let params = {
                type: 'getAionPeiFang',
                data: {
                    name: this.name,
                    min: this.min,
                    max: this.max,
                    pinzhi: this.pinzhi,
                    type: this.type,
                    pageIndex: this.pageindex,
                    pageSize: this.pagesize,
                },
            }
            get('game',params).then(res=>{
                if(res){
                    this.list = res.list
                    this.total = res.total
                }
            })
        },
        pagechange: function(currentPage) {
            this.pageindex = currentPage;
            this.getData();
        },
    },
}
</script>

<style scoped>
</style>